<!--
  description: gsap
  @author: GuoSiYue
  date: 2021-11-11
 -->

<template>
    <!-- gsap库的使用 -->
    <div>
        <div>
            <button @click="show = !show">Toogle</button>
        </div>
        <transition
                name="why"
                @enter="enter"
                @leave="leave">
            <h2 v-if="show">Hello World</h2>
        </transition>
    </div>

    <!-- gsap数字变化 -->
    <div>
        <input type="number" v-model.number="counter" step="100"/>
        <h2>{{animateNumber}}</h2>
        <!-- 下面的写法也可以 -->
        <!--<h2>{{showNumber.toFixed(0)}}</h2>-->
    </div>
</template>

<script>
    import gsap from 'gsap'

    export default {
        name: "gsap",
        data() {
            return {
                show: true,
                counter: 0,
                showNumber: 0
            }
        },
        methods: {
            enter(el, done) {
                gsap.from(el, {
                    scale: 0,
                    x: 200,
                    onComplete: done
                })
            },
            leave(el, done) {
                gsap.to(el, {
                    scale: 0,
                    x: 200,
                    onComplete: done
                })
            }
        },
        computed: {
            animateNumber() {
                return this.showNumber.toFixed(0)
            }
        },
        watch: {
            counter(newValue) {
                gsap.to(this, {duration: 1, showNumber: newValue})
            }
        }
    }
</script>

<style scoped>
    h2 {
        display: inline-block;
    }
</style>